<template>
  <div id="map">
    <div class="searchArea">
      <!-- <ProvinceCityDistrict /> -->
      <el-form :inline='true' :mode='mapSearch'>
        <el-form-item label="所属市辖区" prop="selectedOptions">
          <el-cascader size="large" :options="options" v-model="mapSearch.selectedOptions" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="行业类别">
          <el-select v-model="mapSearch.industryType" placeholder="行业类别">
            <el-option :label="item.name" :value="item.id" v-for="item in industryLists" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='危废名称'>
          <el-select v-model="mapSearch.wasteType" multiple placeholder="请选择">
            <el-option v-for="item in wasteTypeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='年'>
          <el-date-picker v-model="mapSearch.year" type="year" placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label='月'>
          <el-select placeholder="选择月" v-model='mapSearch.month'>
            <el-option value='01' label='01'></el-option>
            <el-option value='02' label='02'></el-option>
            <el-option value='03' label='03'></el-option>
            <el-option value='04' label='04'></el-option>
            <el-option value='05' label='05'></el-option>
            <el-option value='06' label='06'></el-option>
            <el-option value='07' label='07'></el-option>
            <el-option value='08' label='08'></el-option>
            <el-option value='09' label='09'></el-option>
            <el-option value='10' label='10'></el-option>
            <el-option value='11' label='11'></el-option>
            <el-option value='12' label='12'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="default" @click="resetSeachConditions">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="charts" style="width:100%;height:300px">
      <div id="main" style="width:100%;height:100%"></div>
    </div>
    <div id='container'></div>
  </div>
</template>
<script>
// import ProvinceCityDistrict from '@/components/ProvinceCityDistrict/ProvinceCityDistrict'
import {
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  data() {
    return {
      msg: '地图信息',
      mapSearch: {
        selectedOptions: [],
        industryType: null,
        wasteType: null,
        year: null,
        month: null
      },
      options: regionDataPlus,
      arr: [],
      industryLists: [],
      wasteTypeList: [],
      months: [],
      myChart: ''
    }
  },
  created() {
    // 获取行业类别
    this.$common.$ajax("/sys/industry/list", {}, "get").then(res => {
      this.industryLists = res.data.body;
    });
    // 获取危废类型
    this.$common.$ajax("/wf/wastetype/wastetype", {}, "get").then(res => {
      this.wasteTypeList = res.data.body;
    });
  },
  mounted() {
    // 获取月份
    this.getMonths()
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 11, //初始化地图层级
      center: [116.397428, 39.90923] //初始化地图中心点
    });
    var marker = new AMap.Marker({
      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      position: [116.406315, 39.908775],
      offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);
    this.$common.$ajax('/datacenter/maplist', {
      province: "江苏省",
      city: "南京市",
      district: "江宁区",
      // "province":"江苏省",
      // "city":"南京市",
      // "district":"江宁区",
      // "industryType":"1",
      // "companyType":"1",
      // "year":"2019",
      // "month":"02",
      // "limits":"1",
      // "currentpage":"1",
      // "wasteType":["67","69"]
    }, 'post').then(res => {
      console.log(res.data)
    })

    // 初始化图表
    this.initEcharts();
    this.myChart.resize();
    window.addEventListener("resize", () => {
      if (this.myChart) {
        this.myChart.resize();
      }
    });
  },
  methods: {
    handleChange(val) {
      console.log(val)
      this.arr = val.map(item => {
        return CodeToText[item] == "全部" || CodeToText[item] == "" ?
          "" :
          CodeToText[item];
      });
    },
    initEcharts() {
      this.myChart = this.$echarts.init(document.getElementById('main'));
      var option = {
        title: {
          text: '折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      this.myChart.setOption(option)
    },
    onSearch() {
      // 打印搜索条件
      console.log(this.mapSearch)
    },
    resetSeachConditions() {

    },
    getMonths() {
      for (let i = 1; i < 13; i++) {
        if (i < 10) {
          this.months.push('0' + i)
        } else {
          this.months.push(i)
        }
      }

    }
  },
  computed: {

  },
  components: {

  }

}

</script>
<style lang="scss" scoped>
#map {
  height: 600px;

  #container {
    width: 80%;
    height: 100%;
  }
}

</style>
